<template>
  <view class="container">
    <!-- Calendar Section at the top -->
    <view class="calendar-wrapper">
      <calendar-section @day-selected="handleDaySelected" />
    </view>

    <!-- Category Cards -->
    <view class="category-grid">
      <category-card 
        v-for="(category, index) in categories" 
        :key="index" 
        :category="category"
        :is-active="category.id === activeCardId"
        @hover="onCardHover(index, $event)"
        @card-click="setActiveCard" />
    </view>

    <!-- Bottom Navigation Bar -->
    <bottom-navigation 
	  :defaultIndex="0"
      @nav-click="onNavItemClick"
      @fab-click="onFabClick" />
  </view>
</template>

<script>
import CategoryCard from '@/components/CategoryCard/CategoryCard.vue';
import BottomNavigation from '@/components/BottomNavigation/BottomNavigation.vue';
import CalendarSection from '@/components/CalendarSection/CalendarSection.vue';

export default {
  components: {
    CategoryCard,
    BottomNavigation,
    CalendarSection
  },
  data() {
    return {
      activeCardId: null, // 存储当前活动卡片的ID
      categories: [
        { 
          id: 1,
          title: '生活', 
          taskCount: 6, 
          completed: 2, 
          uncompleted: 4, 
          color: '#7766E7'
        },
        { 
          id: 2,
          title: '工作', 
          taskCount: 10, 
          completed: 3, 
          uncompleted: 7, 
          color: '#518BF1'
        },
        { 
          id: 3,
          title: '学习', 
          taskCount: 3, 
          completed: 1, 
          uncompleted: 2, 
          color: '#FFCD00'
        },
        { 
          id: 4,
          title: '社交', 
          taskCount: 2, 
          completed: 2, 
          uncompleted: 0, 
          color: '#FE748B'
        },
        { 
          id: 5,
          title: '健康', 
          taskCount: 2, 
          completed: 0, 
          uncompleted: 2, 
          color: '#1EBD85'
        },
        { 
          id: 6,
          title: '其他', 
          taskCount: 5, 
          completed: 2, 
          uncompleted: 3, 
          color: '#C4C4C4'
        }
      ],
      selectedDate: null
    }
  },
  methods: {
    handleDaySelected(data) {
      this.selectedDate = data.selectedDay;
      console.log('Selected day:', data.selectedDay);
    },
    onCardHover(index, isHovering) {
      // 鼠标悬停不再改变卡片高亮状态
      // 只在点击时更新activeCardId
    },
    setActiveCard(cardId) {
      // 设置当前活动卡片
      this.activeCardId = cardId;
    },
    onNavItemClick(index) {
      console.log('导航项点击:', this.navItems[index].name);
    },
    onFabClick() {
      console.log('添加新任务');
    }
  },
  // 添加页面显示生命周期钩子，从缓存中恢复活动卡片状态
  onShow() {
    // 从本地存储获取最后点击的卡片ID
    const lastActiveCardId = uni.getStorageSync('lastActiveCardId');
    if (lastActiveCardId) {
      this.activeCardId = lastActiveCardId;
    }
  }
}
</script>

<style>
.container {
  background-color: #F8F8FB;
  min-height: 100vh;
  position: relative;
  padding-bottom: 150rpx;
}

/* Calendar Wrapper */
.calendar-wrapper {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Category Grid */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30rpx;
  justify-content: space-between;
  margin-top: 30rpx;
}
</style>